<template>
	<view>
		<u-navbar title="个人资料">
		</u-navbar>
		<view class="u-text-center ">
			<view class="u-m-t-10">
				<u-avatar :size="150" :src="form.avatar" class="u-flex-24"></u-avatar>
			</view>
			<view class="u-flex-1">
				<u-button shape="square" size="mini" @click="chooseAvatar">修改头像</u-button>
			</view>
		</view>
		<view class="u-p-20">
			<u-form ref="uForm" :error-type="errorType" :label-width="150" :model="form">
				<u-form-item label="用户昵称" prop="nickName">
					<u-input v-model="form.nickName"/>
				</u-form-item>
				<u-form-item label="手机号码" prop="phonenumber">
					<u-input v-model="form.phonenumber"/>
				</u-form-item>
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="form.email"/>
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<u-radio-group v-model="form.sex">
						<u-radio v-for="(item, index) in sex" :key="index" :name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-m-20">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
export default {
	name: "profile",
	data() {
		return {
			errorType: ['message'],
			form: {
				avatar: '',
				nickName: '',
				email: '',
				sex: '',
				phonenumber: ''
			},
			sex: [
				{
					name: '男',
					value: '0'
				},
				{
					name: '女',
					value: '1'
				}
			],
			rules: {
				nickName: [
					{
						required: true,
						message: '请输入昵称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				],
				email: [
					{
						type: 'email',
						message: '请输入正确邮箱',
						trigger: 'change'
					}
				],
				phonenumber: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				]
			}
		};
	},
	onLoad() {
		this.$u.api.getUserInfo().then(res => {
			this.form = res.user
		})
	},
	created() {
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			this.avatar = path;
			// 可以在此上传到服务端
			uni.uploadFile({
				url: this.$u.api.getBaseUrl() + '/system/user/profile/avatar',
				filePath: path,
				header: {
					'Authorization': this.vuex_token
				},
				name: 'avatarfile',
				complete: (res) => {
					this.form.avatar = JSON.parse(res.data).data.imgUrl
				}
			});
		})
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$nextTick(() => {
			this.$refs.uForm.setRules(this.rules);
		})
	},
	methods: {
		chooseAvatar() {
			// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			this.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
				// 内部已设置以下默认参数值，可不传这些参数
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg',
				}
			})
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.updateProfile(this.form).then(res => {
						this.$u.toast('保存成功');
					})
				} else {
					console.log('验证失败');
				}
			});
		}
	}
}
</script>

